body {

  background-color: white;
}

#graph-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding-top: 60px;
  overflow: hidden;
  position: relative;
}

.node .node-shape {
  cursor: pointer;
  fill-opacity: .5;
  stroke-opacity: .8;
  -webkit-transition: fill-opacity .5s, stroke-opacity .5s;
     -moz-transition: fill-opacity .5s, stroke-opacity .5s;
       -o-transition: fill-opacity .5s, stroke-opacity .5s;
          transition: fill-opacity .5s, stroke-opacity .5s;

  /* Set No Stroke */
  stroke-width: 0;
}

.node .node-shape.rectangle,
.node .node-shape.square {
  shape-rendering: crispEdges;
}

.link {
  opacity: 1;
  fill: #bbb;
  fill-opacity: .2;
  stroke-width: 0;

  -webkit-transition: fill-opacity .5s;
     -moz-transition: fill-opacity .5s;
       -o-transition: fill-opacity .5s;
          transition: fill-opacity .5s;

  -webkit-transition: fill .5s;
     -moz-transition: fill .5s;
       -o-transition: fill .5s;
          transition: fill .5s;
}

.node .node-title {
  fill: white;
  pointer-events: none;
  font-family: Helvetica;
  font-size: 10px;
  opacity: 1.0;

  -webkit-transition: fill-opacity .5s;
     -moz-transition: fill-opacity .5s;
       -o-transition: fill-opacity .5s;
          transition: fill-opacity .5s;

  /* Make node text non-selectable to prevent accidental highlight on click+drag */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

/* Node menu button - darker on hover */
.node .node-menu-button {
  shape-rendering: crispEdges;
  fill-opacity: 0;
}
.node .node-menu-button:hover {
  fill-opacity: 0.5;
}
.node .node-menu-triangle {
  -webkit-transition: fill-opacity .5s;
     -moz-transition: fill-opacity .5s;
       -o-transition: fill-opacity .5s;
          transition: fill-opacity .5s;
}

/* Node Hidden */
.node.hidden .node-shape,
.node.hidden .node-title,
.node.hidden .node-menu-button,
.node.hidden .node-menu-triangle {
  fill-opacity: 0;
  stroke-opacity: 0;
}

/* Link Hidden */
.link.hidden {
  fill-opacity: 0;
}

/* Node highlight circle */
.node .node-circle {
  opacity: 0;
  fill: none;
  stroke-width: 2;
  stroke: blue;
  transition: opacity 0.2s ease;
}
.node.hovered .node-circle {
  opacity: .3;
  transition: opacity 0.2s ease;
}
.node.selected .node-circle {
  opacity: .3;
  stroke: red;
}

/* Node Context Menu */
#node-menu {
  position: absolute;
  display: none;
}
#node-menu .background {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}
#node-menu ul {
  position: relative;
  padding: 4px 8px;
  list-style: none;
  margin: 0;
}
#node-menu li {
  color: white;
  padding: 4px;
  cursor: pointer;
  white-space: nowrap;
}
#node-menu li:hover {
  color: black;
}
#node-menu li.disabled {
  cursor: not-allowed;
}


/*** Controls ***/

#controls {
  position: fixed;
  top: 65px;
  right: 26px;

}

/* button reset */
#controls button::-moz-focus-inner {
  border:0;
  padding:0
}
#controls button {
  width:auto;
  border:0 none;
  margin:0;
  padding:0;
  background:transparent;
  overflow:visible;
  /* Stupid IE */
  font:14px arial, sans-serif;
  #vertical-align:middle; /* IE6,IE7 */
}

/* General Styles */
#controls button,
#controls input {
  background: rgba(255,255,255,0.4);
  border: 0px solid #ccc;
  border-radius: 2px;

  -webkit-box-shadow: 0px 0px 5px -2px #000;
     -moz-box-shadow: 0px 0px 5px -2px #000;
       -o-box-shadow: 0px 0px 5px -2px #000;
          box-shadow: 0px 0px 5px -2px #000;

  -webkit-transition: color .2s, background-color .4s;
     -moz-transition: color .2s, background-color .4s;
       -o-transition: color .2s, background-color .4s;
          transition: color .2s, background-color .4s;
}

#controls button:hover, #controls button:focus,
#controls input:hover, #controls input:focus {
  background-color: rgba(255,255,255,0.9);
}

#controls button:focus,
#controls input:focus {
  -webkit-box-shadow: 0px 0px 10px -2px #009cc7;
     -moz-box-shadow: 0px 0px 10px -2px #009cc7;
       -o-box-shadow: 0px 0px 10px -2px #009cc7;
          box-shadow: 0px 0px 10px -2px #009cc7;
}

/* Zoom Controls */
#controls .zoom {
  width: 32px;
}
#controls .zoom button {
  margin-top: 12px;
  width: 32px;
  height: 32px;
  outline: none;
}
#controls .zoom button:focus {
  color: #009cc7;
}
#controls .zoom button i {
  font-size: 10px;
}
.nodes text tspan{
  font-size:9px;
}
.minimap-attach{
  z-index: 99999;
}

.xtrace-tooltip {
	text-align: left;
}

.xtrace-tooltip .key {
	display: inline-block;
	float: left;
	min-width: 90px;
	font-weight: bold;
}

.xtrace-tooltip .value {
	display: inline-block;
	float: left;
	word-wrap: break-word;
	max-width: 410px;
}

.xtrace-tooltip .clear {
	clear: both;
}

.context-menu .highlight {
	color: #7F2389;
}

.context-menu a:hover .highlight {
	color: #CA78D2;
}

text,tspan,.tipsy {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.context-menu {
    /*background: rgba(245, 245, 245, 0.7);*/
    background: #add8e6;
    border: 1px solid #999999;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.context-menu a {
    color: #333333;
    display: block;
    padding: 3px;
    text-decoration: none;
}
.context-menu a:hover {
	background: rgba(102, 102, 102, 0.7);
    color: white;
    text-decoration: none;
}

#footer{
  width:100%;
  float:right;
  display: block;
  padding-top: 3px;
}
